<template>
  <div id="approvalList" >
    <div class="searchBody" ref="searchBody">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批ID">
          <el-select v-model="formInline.region" placeholder="审批ID">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="发起人">
          <el-select v-model="formInline.region" placeholder="发起人">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="发起时间">
          <el-date-picker
              v-model="formInline.region"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">重置</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button type="primary" @click="onSubmit">发起审批</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBody">
      <el-table :data="tableData" :height="homeBodyHeight" style="width: 100%">
        <el-table-column prop="is" label="审批ID" />
        <el-table-column prop="is" label="流程ID" />
        <el-table-column prop="name" label="模板ID" />
        <el-table-column prop="name" label="模板名称" />
        <el-table-column prop="name" label="当前审批人" />
        <el-table-column prop="name" label="审批状态" />
        <el-table-column prop="name" label="备注" />
        <el-table-column prop="name" label="审批理由" />
        <el-table-column prop="createName" label="发起人" />
        <el-table-column prop="createTime" label="发起时间" />
        <el-table-column label="操作" fixed="right" width="160">
          <template scope="row" #default>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="seeDetail()">详情</el-button>
            <el-button type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paginationBody">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
  </div>
  <el-drawer v-model="drawer" direction="rtl">
    <template #title>
      <h4>详情</h4>
    </template>
    <template #default>
      <div>
        <el-radio v-model="radio1" label="Option 1" size="large"
        >Option 1</el-radio
        >
        <el-radio v-model="radio1" label="Option 2" size="large"
        >Option 2</el-radio
        >
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">cancel</el-button>
        <el-button type="primary" @click="confirmClick">confirm</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup name="approvalList">
import {ref, reactive, computed,watch, onMounted, nextTick} from "vue";
import {useStore} from "vuex";
const searchBody = ref(null)
const drawer = ref(false)
let searchBodyHeight = ref(null)
let homeBodyHeight = ref('0')
const store = useStore()
const homeWindowViewBodyHeight = computed(() => {
  return store.state.homeWindowViewBodyHeight
})

const seeDetail = () => {
  drawer.value = true
}

onMounted(() => {
  nextTick(() => {
    searchBodyHeight.value = searchBody.value.clientHeight
    if (homeWindowViewBodyHeight.value > 0) {
      homeBodyHeight.value = homeWindowViewBodyHeight.value - 50 - searchBodyHeight.value
    }
    console.log(searchBodyHeight.value)
    console.log(homeWindowViewBodyHeight.value)
  })
})

watch(homeWindowViewBodyHeight,(state,preState)=> {
  console.log(state)
  homeBodyHeight.value = homeWindowViewBodyHeight.value - 50 - searchBodyHeight.value
})

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const formInline = reactive({
  user: '',
  region: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style scoped lang="less">
#approvalList {
  width: 100%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  flex-direction: column;

  .searchBody {
    width: 100%;
    height: auto;
    padding: 14px 14px 0;
    box-sizing: border-box;
  }

  .tableBody {
    width: 100%;
    height: auto;
    padding:0 14px;
    box-sizing: border-box;
  }

  .paginationBody {
    width: 100%;
    height: 50px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    justify-content: right;
    padding: 0 14px 0;
    box-sizing: border-box;

  }
}
</style>
